<script setup lang="ts">
import type{ Ref } from 'vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getstoryListFn ,fourstoryListFn,fournameListFn,locationfourListFn,foodListFn,whereListFn,getnameListDataFn,locationListFn,allfoodListFn,allWhereFn} from '@/api/find';
import { onMounted } from 'vue';
import type{ iState, iStory,iName,iLocation,iFood, iWhere } from '@/type/findType';
import { reactive } from 'vue';
const router=useRouter()
const state: iState = reactive({
  storyListData:[],
  fourStory:[],
  story:[],
  fourName:[],
  location:[],
  locationFour:[],
  foodData:[],
  allFood:[],
  whereData:[],
  allwhere:[]

});
const ishome=ref(false)
const ispoint=ref(false)
const isfood=ref(false)
const iswhere=ref(false)
const active:Ref<number> = ref(0);
  onMounted(() => {
    getstoryListFn().then(res=>{
      console.log(res.data);
      state.storyListData=res.data
      console.log(state.storyListData)})
    fourstoryListFn().then(res=>{
      state.fourStory=res.data
      console.log(state.fourStory)
    })
    getnameListDataFn().then(res=>{
      state.story=res.data.nameList
      console.log( state.story);
      
    })
    fournameListFn().then(res=>{
      state.fourName =res.data
    })
    locationListFn().then(res=>{
      state.location=res.data.locationList
    })
    locationfourListFn().then(res=>{
      state.locationFour=res.data
    })
    allfoodListFn().then(res=>{
      state.allFood=res.data.foodList
    })
    foodListFn().then(res=>{
      state.foodData=res.data
    })
    whereListFn().then(res=>{
      state.whereData=res.data
    })
    allWhereFn().then(res=>{
      state.allwhere=res.data.whereList
    })
  })
  function detailclick(item:iStory){
    router.push(   {
     name: 'detail',
        query: {
          bed: 1,
          kind:item.location ,
          price: Math.floor(Math.random()*400+800),
          start:item.like,
          img:item.img,
          proid:item.proid
        }
  
})
  }
  function pointclick(item:iLocation) {
    router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
  }
  function foodclick(item:iFood){
    router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
  }
  function whereclick(item:iWhere){
    router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
  }
  state.story
  function hosterClick(item:iName){
  router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
}
</script>
<template>
<main class="box">
  <header class="header">
      <slot name="left"></slot>
      <span>探索发现</span>
      <slot name="right"></slot>
  </header>
  <div class="content"> <van-tabs v-model:active="active"  swipeable>
  <van-tab title="全部故事">
  <div class="storybox"><div class="storyall" @click="detailclick(item)" v-for="item in state.fourStory" :key=item.name ><img class="storyimg" :src="item.img" alt="">
  <div class="storytell"><span class="storylocal">{{ item.location }}</span><span class="storyText">{{ item.text }}...</span></div>
  <div class="storyboxb"><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span class="storyname">{{ item.name }}</span><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span class="storylike"> {{ item.like }}</span><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u492.svg" /><span class="storylike">{{ item.message }}</span></div></div></div>
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item><img class="swipimg"  src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u547.png" alt=""></van-swipe-item> 
    <van-swipe-item><img class="swipimg"  src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u553.png" alt=""></van-swipe-item>  
    <van-swipe-item><img class="swipimg"  src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u550.png" alt=""></van-swipe-item>

</van-swipe>
  <div class="storybox"><div @click="detailclick(item)" class="storyall" v-for="item in state.storyListData" :key=item.name ><img class="storyimg" :src="item.img" alt="">
  <div class="storytell"><span class="storylocal">{{ item.location }}</span><span class="storyText">{{ item.text }}...</span></div>
  <div class="storyboxb"><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span class="storyname">{{ item.name }}</span><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span class="storylike"> {{ item.like }}</span><van-icon size="16px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E5%8F%91%E7%8E%B0/u492.svg" /><span class="storylike">{{ item.message }}</span></div></div></div></van-tab>

  <van-tab title="名宿"><div class="hosterAll">
  <div @click="hosterClick(item)" class="hosterbox"  v-for="item in ishome?state.story:state.fourName" :key=item.name>
  <img class="hosterimg" :src="item.img" alt="">
  <div><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="hosterlocation">{{ item.location }}</span></div>
  <div class="hostertext">{{ item.text }}</div>
  <div class="hosterboxb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span>{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span> {{ item.like }}</span></div></div>
  
</div>
</div>
<button @click="ishome=true" v-if="!ishome" class="hosterbutton">显示更多故事</button></van-tab>
  <van-tab title="景点"><div class="locationAll"><div @click="pointclick(item)" :key=item.name v-for="item in ispoint?state.location:state.locationFour" class="locationbox">
  <img class="locationimg" :src="item.img" alt="">
  <div class="locationm"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="locationl">{{ item.location }}</span></div>
  <div class="locationText">{{ item.text }}......</div>
  <div class="locationb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span class="locationname">{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span class="locationname"> {{ item.like }}</span></div></div>
  </div>
  </div>
  <button @click="ispoint=true" v-if="!ispoint" class="hosterbutton">显示更多故事</button>
  </van-tab>
  <van-tab title="美食"><div class="locationAll"><div @click="foodclick(item)" :key=item.name v-for="item in isfood?state.allFood:state.foodData" class="locationbox">
  <img class="locationimg" :src="item.img" alt="">
  <div class="locationm"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="locationl">{{ item.location }}</span></div>
  <div class="locationText">{{ item.text }}......</div>
  <div class="locationb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span class="locationname">{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span class="locationname"> {{ item.like }}</span></div></div>
  </div>
  </div>
  <button @click="isfood=true" v-if="!isfood"class="hosterbutton">显示更多故事</button></van-tab>
  <van-tab title="出去嗨"><div class="locationAll"><div @click="whereclick(item)" :key=item.name v-for="item in iswhere?state.allwhere:state.whereData" class="locationbox">
  <img class="locationimg" :src="item.img" alt="">
  <div class="locationm"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="locationl">{{ item.location }}</span></div>
  <div class="locationText">{{ item.text }}......</div>
  <div class="locationb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span class="locationname">{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span class="locationname"> {{ item.like }}</span></div></div>
  </div>
  </div>
  <button @click="iswhere=true" v-if="!iswhere"class="hosterbutton">显示更多故事</button></van-tab>
</van-tabs></div>
</main>
</template>

<style lang="scss" scoped>

.storybox{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.storyall{
  width: 1.6rem;
  height: 1.7rem;
  border: 1px solid #a4a5c5;
  box-shadow:1px -1px 1px #a4a5c5 ;
  margin-bottom: 20px;
}
.storyimg{
  width: 1.6rem;
  height: 1rem;
}
.storyText{
  font-size: 14px;
  margin-left: 5px;
}
.storylocal{
  font-weight: 800;
  font-size: 14px;
}
.storyname{
  font-weight: 800;
  display: inline-block;
  position: relative;
  bottom: 2px;
}
.storylike{
  display: inline-block;
  position: relative;
  bottom: 2px;
}
.swipimg{
  width: 94%;
  margin-left: 10px;
}
.hosterbutton{
  width: 60%;
  height: 0.4rem;
  margin: 20px 20% 0;
  border: 1px solid blue;
  color: blue;
  background-color: white;
  border-radius: 5px;
}
.hosterAll{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .hosterbox{
    border: 1px solid #cccccc;
background-color: white;
width: 46%;
    .hosterimg{
  width: 100%;
}
.hosterlocation{
 position: relative;
  font-size: 16px;
  bottom: 3px;
  left: 15px;
  box-sizing: border-box;
}

.hostertext{
font-size: 14px;
height: 1.2rem;
}
.hosterboxb{
.left{
float: left;
}
.right{
float: right;
}
}
  }
 
}
.locationAll{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .locationbox{
    border: 1px solid #cccccc;
background-color: white;
width: 46%;
    .locationimg{
  width: 100%;
  height: 1rem;
}
.locationm{
  .locationl{

    position: relative;
  font-size: 14px;
  bottom: 3px;
  left: 15px;
  box-sizing: border-box;
  }
}

.locationText{
  height: 0.4rem;
font-size: 16px;
margin-bottom: 20px;
}
.locationb{

.left{
float: left;
 .locationname{
  position: relative;
  bottom: 8px;
 }
}
.right{
float: right;
.locationname{
  position: relative;
  bottom: 4px;
 }
}
}
  }
 
}
</style>